前言

Parallel Routes 讓我們可以在同一個路由底下，切分出多個 page-level 的 chunk，並且由 layout 決定如何渲染這些 chunk。

它讓我們更好的在同一頁面中，管理多塊邏輯獨立的區塊。

像是身份驗證的彈窗、多塊獨立的區塊，或是 conditional render，都可以利用這個 pattern 讓我們撰寫的程式碼更易於閱讀、管理。

有人可能會把 Parallel Routes 與Routes Group 搞混，這兩個完全不一樣，而且可以一起使用
Routes Group 是將 不同的 route 做群組分類
Parallel Routes 則是在 同一個 route 底下，將不同的邏輯區分開來

大綱

• Parallel Routes
• 步驟
• 實際使用
• Nested
• default
• useSelectedLayoutSegment(s)

Parallel Routes

上圖可以看到 @team 與 @analytics 這兩個 folder。

• @ 開頭的 folder 不會對路由造成影響，app/@team/page.tsx 實際渲染的路由為 /，這個特殊的檔案夾是用來切分同一個路由底下的不同邏輯區塊。
• 每個 @ 開頭的 folder 都可以建立屬於自己的 loading, error 等任何 app router 允許的保留字檔案。
• 與 @folder 同一層的 layout 可以解構出與 folder 相同名稱的頁面，決定這些區塊的渲染方式。
• 使用 @folder 後，原本的路由還是可以建立 page，在 layout 中解構出 children 來使用

步驟

1. 建立 @folder 資料夾
2. 在這個 @folder 資料夾建立 page 及其他 error, loading 等等的保留字檔案
3. 在上一層 layout 中的 props 取得 folder，並決定如何渲染

folder名稱可以自己定義，layout props 中的名稱也會與 folder 相同

實際使用

假使我們建立的以下檔案結構

app
|__ @team
|____ page.tsx
|____ loading.tsx
|__ @analytics
|____ page.tsx
|____ loading.tsx
|__ page.tsx
|__ layout.tsx

接著可以在 app/layout.js 中使用 @team、@analautics 與 app/page 這三塊 UI。

export default function Layout(props: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {props.children}
      {props.team}
      {props.analytics}
    </>
  )
}

Nested

繼續拿上面的資料夾結構來說，這個資料夾結構只渲染了 / 這個根目錄的路由，只是我們區分了三塊邏輯 @team、@analautics 和預設的 page。

如果建立並訪問了 /dashboard 路由，以 @team 來說，它就會去渲染 app/@team/dashboard/page.tsx 這個 UI。

也就是說只要多建立一個新的路由，就必須為這三個區塊建立對應的 UI，以新增 /dashboard 為例，資料夾結構大概會長成這樣。

app
|__ @team
|____ page.tsx
|____ loading.tsx
|____ dashboard
|______ page.tsx
|__ @analytics
|____ page.tsx
|____ loading.tsx
|____ dashboard
|______ page.tsx
|__ page.tsx
|__ layout.tsx
|__ dashboard
|______ page.tsx

default

如果建立了 nested parallel route，但卻有某個 parallel route 沒有建立對應的檔案，此時就會發生 404 錯誤。

我們可以在 parallel route 中建立 default 元件。當頁面渲染時，沒有在對應的 parallel route 找到 page 時，就會顯示 default 的檔案。

以下頁面在訪問 /dashboard 時就不會因為 @analytics 沒有建立對應頁面而直接報錯，它在沒有對應頁面元件時，會渲染 default 的 UI。

app
|__ @team
|____ page.tsx
|____ loading.tsx
|____ dashboard
|______ page.tsx
|__ @analytics
|____ default.tsx
|____ page.tsx
|____ loading.tsx
|__ page.tsx
|__ layout.tsx
|__ dashboard
|______ page.tsx

useSelectedLayoutSegment(s)

我還沒搞懂，待補。

參考文章

• Next - route handlers
• Next.Js 13 Parallel Routes: A Comprehensive Guide
• Next - useSelectedLayoutSegment
• Next - useSelectedLayoutSegments(這個有 s)